<template>
  <div class="box">
    <div class="header">
      <van-nav-bar
       title="我的订单"
       left-arrow
       @click-left="$router.go(-1)"
       class="color"
     />
    </div>
    <div class="content">
      <van-tabs v-model="active">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-tab :title="item1"  v-for="(item1, index) of type" :key="index">
            <p style="text-align:center;line-height:.4rem;font-size:.14rem;color:#a9aaac;">没有更多了{{index}}</p>
          </van-tab>
        </van-pull-refresh>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Tab, Tabs, PullRefresh, Toast, Sticky } from 'vant'
Vue.use(NavBar)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(PullRefresh)
Vue.use(Toast)
Vue.use(Sticky)
export default {
  data () {
    return {
      active: '',
      count: 0,
      isLoading: false,
      type: ['全部', '待付款', '待发货', '待收货', '已取消']
    }
  },
  mounted () {
    // 从地址栏获取参数判断当前货物状态
    const url = window.location.href
    this.active = Number(url.split('=')[1])
    console.log(this.active)
  },
  methods: {
    onRefresh () {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    }
  }
}

</script>
<style lang="scss" scoped>
.van-nav-bar {
  background-image: linear-gradient(-90deg,#37ddc7,#3cd8e2 50%,#40d3fd),linear-gradient(#01a8f4,#01a8f4);
}
</style>

<style>
.van-nav-bar .van-nav-bar__title, .van-nav-bar .van-nav-bar__left .van-nav-bar__arrow {
  color: white;
}
</style>
